.dialog__backdrop {
	align-items: center;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	position: fixed;
	right: 0;
	top: 46px;
	transition: background-color .2s ease-in;
	z-index: z-index( 'root', '.dialog__backdrop' ); // try to ensure that dialogs are on top of everything else

	&.dialog-enter,
	&.dialog-leave.dialog-leave-active {
		background-color: rgba( lighten( $gray, 30% ), 0 );
	}

	&,
	&.dialog-enter.dialog-enter-active,
	&.dialog-leave {
		background-color: rgba( lighten( $gray, 30% ), 0.8 );
	}

	// covers the masterbar as well
	&.is-full-screen {
		top: 0;
	}
}

.dialog.card {
	max-width: 90%;
	opacity: 1;
	position: relative;
	transition: opacity .2s ease-in;
	// IE needs a horizontal margin values to properly center flex item
	margin: auto 0;

	.dialog-enter &,
	.dialog-leave.dialog-leave-active & {
		opacity: 0;
	}

	&,
	.dialog-enter.dialog-enter-active &,
	.dialog-leave & {
		opacity: 1;
	}
}

.dialog__content {
	color: darken( $gray, 20% );

	h1 {
		color: $gray-dark;
		font-size: 1.375em;
		font-weight: 600;
		height: 2em;
		line-height: 2em;
		margin-bottom: .5em;
	}
}

.dialog__action-buttons {
	overflow: hidden;
	border-top: 1px solid lighten( $gray, 30% );
	padding: 16px;
	margin: 0 -24px -24px;
	text-align: right;
}

.dialog__action-buttons .button {
	margin-left: 10px;
	min-width: 80px;

	.is-left-aligned {
		margin-left: 0;
		margin-right: 10px;
	}
}

.dialog__action-buttons .is-left-aligned {
	float: left;
}
